<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公告管理</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
    }
    .layui-card-header {
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .filter-bar {
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
    }
    .layui-form-item {
      margin-bottom: 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    .data-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 15px 20px;
    }
    .stat-item {
      flex: 1;
      min-width: 120px;
      padding: 15px;
      text-align: center;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      margin: 5px 0;
    }
    .table-container {
      padding: 0 20px 20px;
    }
    .announcement-title {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .status-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: white;
    }
    .status-published { background-color: #10B981; }
    .status-pending { background-color: #F59E0B; }
    .status-expired { background-color: #EF4444; }
    .status-draft { background-color: #94A3B8; }
    .batch-operations {
      padding: 10px 20px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
  </style>
</head>
<body>
  <!-- 公告统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-bullhorn"></i> 公告统计</h3>
      <button class="layui-btn layui-btn-normal" id="addAnnouncementBtn">
        <i class="fa fa-plus"></i> 发布公告
      </button>
    </div>
    <div class="data-stats">
      <div class="stat-item">
        <div><i class="fa fa-check-circle" style="color:#10B981"></i> 已发布</div>
        <div class="stat-value">36</div>
      </div>
      <div class="stat-item">
        <div><i class="fa fa-clock-o" style="color:#F59E0B"></i> 待发布</div>
        <div class="stat-value">8</div>
      </div>
      <div class="stat-item">
        <div><i class="fa fa-times-circle" style="color:#EF4444"></i> 已过期</div>
        <div class="stat-value">12</div>
      </div>
      <div class="stat-item">
        <div><i class="fa fa-file-text-o" style="color:#94A3B8"></i> 草稿</div>
        <div class="stat-value">5</div>
      </div>
    </div>
  </div>

  <!-- 公告筛选与列表 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-list"></i> 公告列表</h3>
    </div>
    <div class="filter-bar">
      <form class="layui-form" lay-filter="filterForm">
        <div class="layui-form-item">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-inline" style="width: 180px;">
            <input type="text" name="title" placeholder="请输入标题" class="layui-input">
          </div>
          
          <label class="layui-form-label">状态</label>
          <div class="layui-input-inline" style="width: 120px;">
            <select name="status">
              <option value="">全部</option>
              <option value="published">已发布</option>
              <option value="pending">待发布</option>
              <option value="expired">已过期</option>
              <option value="draft">草稿</option>
            </select>
          </div>
          
          <label class="layui-form-label">时间</label>
          <div class="layui-input-inline" style="width: 180px;">
            <input type="text" name="timeRange" placeholder="选择时间范围" class="layui-input" id="timeRange">
          </div>
          
          <button class="layui-btn" lay-submit><i class="fa fa-search"></i> 搜索</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </form>
    </div>
    <div class="table-container">
      <table class="layui-table">
        <thead>
          <tr>
            <th style="width:40px"><input type="checkbox" lay-skin="primary" id="checkAll"></th>
            <th>公告ID</th>
            <th>标题</th>
            <th>发布人</th>
            <th>发布时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" lay-skin="primary" data-id="1001"></td>
            <td>ANN20231001</td>
            <td><div class="announcement-title" title="关于2023年度科研项目申报的通知">关于2023年度科研项目申报的通知</div></td>
            <td>admin</td>
            <td>2023-09-15</td>
            <td><span class="status-tag status-published">已发布</span></td>
            <td>
              <button class="layui-btn layui-btn-xs view-btn" data-id="1001">查看</button>
              <button class="layui-btn layui-btn-normal layui-btn-xs edit-btn" data-id="1001">编辑</button>
              <button class="layui-btn layui-btn-danger layui-btn-xs delete-btn" data-id="1001">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" lay-skin="primary" data-id="1002"></td>
            <td>ANN20231002</td>
            <td><div class="announcement-title" title="科研社区平台升级维护通知">科研社区平台升级维护通知</div></td>
            <td>system</td>
            <td>2023-09-10</td>
            <td><span class="status-tag status-published">已发布</span></td>
            <td>
              <button class="layui-btn layui-btn-xs view-btn" data-id="1002">查看</button>
              <button class="layui-btn layui-btn-normal layui-btn-xs edit-btn" data-id="1002">编辑</button>
              <button class="layui-btn layui-btn-danger layui-btn-xs delete-btn" data-id="1002">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" lay-skin="primary" data-id="1004"></td>
            <td>ANN20231004</td>
            <td><div class="announcement-title" title="研究生科研能力培训课程报名通知">研究生科研能力培训课程报名通知</div></td>
            <td>教务处</td>
            <td>2023-09-01</td>
            <td><span class="status-tag status-pending">待发布</span></td>
            <td>
              <button class="layui-btn layui-btn-xs view-btn" data-id="1004">查看</button>
              <button class="layui-btn layui-btn-normal layui-btn-xs edit-btn" data-id="1004">编辑</button>
              <button class="layui-btn layui-btn-danger layui-btn-xs delete-btn" data-id="1004">删除</button>
              <button class="layui-btn layui-btn-normal layui-btn-xs publish-btn" data-id="1004">发布</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" lay-skin="primary" data-id="1005"></td>
            <td>ANN20231005</td>
            <td><div class="announcement-title" title="科研成果展示交流会通知">科研成果展示交流会通知</div></td>
            <td>科研处</td>
            <td>2023-08-20</td>
            <td><span class="status-tag status-expired">已过期</span></td>
            <td>
              <button class="layui-btn layui-btn-xs view-btn" data-id="1005">查看</button>
              <button class="layui-btn layui-btn-danger layui-btn-xs delete-btn" data-id="1005">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="batch-operations">
      <div>
        <button class="layui-btn layui-btn-primary" id="batchDeleteBtn" disabled>批量删除</button>
        <button class="layui-btn layui-btn-primary" id="batchPublishBtn" disabled>批量发布</button>
      </div>
      <div class="layui-laypage">
        <span class="layui-laypage-curr"><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span>共 56 条</span>
      </div>
    </div>
  </div>
  
  <div class="footer">© 科研社区管理系统 - 版权所有</div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 初始化日期选择器
      laydate.render({ elem: '#timeRange', range: true });
      
      // 全选功能
      form.on('checkbox(#checkAll)', function(data) {
        const checked = data.elem.checked;
        document.querySelectorAll('tbody [type="checkbox"]').forEach(cb => {
          cb.checked = checked;
        });
        form.render('checkbox');
        updateBatchButtons();
      });
      
      // 单个复选框事件
      form.on('checkbox()', function(data) {
        if (!data.elem.id) {
          const all = document.querySelectorAll('tbody [type="checkbox"]').length;
          const checked = document.querySelectorAll('tbody [type="checkbox"]:checked').length;
          document.getElementById('checkAll').checked = all === checked;
          form.render('checkbox');
          updateBatchButtons();
        }
      });
      
      // 更新批量按钮状态
      function updateBatchButtons() {
        const hasChecked = document.querySelectorAll('tbody [type="checkbox"]:checked').length > 0;
        document.getElementById('batchDeleteBtn').disabled = !hasChecked;
        document.getElementById('batchPublishBtn').disabled = !hasChecked;
      }
      
      // 搜索提交
      form.on('submit', function(data) {
        layer.msg('搜索完成', {icon: 1});
        return false;
      });
      
      // 新增公告
      document.getElementById('addAnnouncementBtn').addEventListener('click', function() {
        layer.open({
          type: 1,
          title: '发布公告',
          content: `
            <div style="padding:20px">
              <form class="layui-form">
                <div class="layui-form-item">
                  <label class="layui-form-label">标题</label>
                  <div class="layui-input-inline" style="width:300px;">
                    <input type="text" name="title" class="layui-input" required>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">内容</label>
                  <div class="layui-input-inline" style="width:300px;">
                    <textarea name="content" class="layui-textarea" rows="4" required></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block" style="margin-left:100px;">
                    <button class="layui-btn" lay-submit>保存</button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll('page')">取消</button>
                  </div>
                </div>
              </form>
            </div>
          `,
          area: ['500px', '300px']
        });
        
        // 绑定保存事件
        form.on('submit', function() {
          layer.closeAll('page');
          layer.msg('发布成功', {icon: 1});
          return false;
        });
      });
      
      // 查看公告
      document.querySelectorAll('.view-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const title = this.closest('tr').querySelector('.announcement-title').title;
          layer.open({
            type: 1,
            title: '查看公告',
            content: `<div style="padding:20px"><h3 style="text-align:center">${title}</h3><p style="margin-top:15px">公告内容详情...</p></div>`,
            area: ['500px', '300px']
          });
        });
      });
      
      // 编辑公告
      document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const title = this.closest('tr').querySelector('.announcement-title').title;
          layer.open({
            type: 1,
            title: '编辑公告',
            content: `
              <div style="padding:20px">
                <form class="layui-form">
                  <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline" style="width:300px;">
                      <input type="text" name="title" value="${title}" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-inline" style="width:300px;">
                      <textarea name="content" class="layui-textarea" rows="4">公告内容详情...</textarea>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left:100px;">
                      <button class="layui-btn" lay-submit>更新</button>
                      <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll('page')">取消</button>
                    </div>
                  </div>
                </form>
              </div>
            `,
            area: ['500px', '300px']
          });
          
          form.on('submit', function() {
            layer.closeAll('page');
            layer.msg('更新成功', {icon: 1});
            return false;
          });
        });
      });
      
      // 删除公告
      document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const title = this.closest('tr').querySelector('.announcement-title').title;
          layer.confirm(`确定删除"${title}"?`, function(index) {
            layer.close(index);
            layer.msg('已删除', {icon: 1});
          });
        });
      });
      
      // 发布公告
      document.querySelectorAll('.publish-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const title = this.closest('tr').querySelector('.announcement-title').title;
          layer.confirm(`确定发布"${title}"?`, function(index) {
            layer.close(index);
            layer.msg('发布成功', {icon: 1});
          });
        });
      });
      
      // 批量删除
      document.getElementById('batchDeleteBtn').addEventListener('click', function() {
        layer.confirm('确定删除选中项?', function(index) {
          layer.close(index);
          layer.msg('批量删除成功', {icon: 1});
        });
      });
      
      // 批量发布
      document.getElementById('batchPublishBtn').addEventListener('click', function() {
        layer.confirm('确定发布选中项?', function(index) {
          layer.close(index);
          layer.msg('批量发布成功', {icon: 1});
        });
      });
    });
  </script>
</body>
</html>
